import React, {useEffect, useState} from 'react';

function App(props) {
  const [num,setNum] = useState(10)
  const [age,setAge] = useState(18)

  //  不传参数，dom挂载完之后要执行，更新完之后也会执行，相当于componentDidMount和componentDidUpdate
  // useEffect(()=>{
      //   console.log(document.querySelector('button'))
      // })

    //第二个参数传一个空数组，dom挂载完之后执行，相当于componentDidMount
    // useEffect(()=>{
    //         console.log(document.querySelector('button'))
    //       },[])

    //第二个参数传入一个数组，当数组中传入数据，dom挂载后会执行并且当数据变化时也会执行，相当于componentDidMount和componentDidUpdate
    useEffect(()=>{
                console.log(document.querySelector('button'))
              },[num])

    return (
        <div>
          <button onClick={()=>setNum(num+1)}>点我</button>
          <button>{num}</button>
          <button>{age}</button>
        </div>
    );
}

export default App;